<div class="meeting-room">
    <eq name="ITManager" value="$Think.session.user.post">
        <a href="/meetings/createMeetingRoom" class="btn btn-default mb-15">
            <i class="fa fa-plus"></i>
            新增会议室
        </a>
    </eq>
    <div class="meeting-room-box">
        <notempty name="rooms">
            <ul class="meeting-room-list">
                <!-- 展示会议室列表的面板 start -->
                <volist name="rooms" id="room">
                    <li data-id="{$room.id}">
                        <div class="clearfix">
                            <div class="pull-left room-info">
                                <div class="room-info-wrap">
                                    <eq name="ITManager" value="$Think.session.user.post">
                                        <div class="room-tool">
                                            <a href="/meetings/editMeetingRoom?id={$room.id}" class="tool fa fa-pencil-square-o" title="编辑"></a>
                                            <a href="javascript: void 0;" class="tool fa fa-trash-o desctroy" title="删除" data-id="{$room.id}"></a>
                                        </div>
                                    </eq>
                                    <div class="title">
                                        <span class="name">{$room.name}</span>
                                        <button type="button" class="btn btn-primary btn-xs ml-5">查看会议</button>
                                        <div style="display: none">
                                            <table class="table">
                                                <thead>
                                                <th>序号</th>
                                                <th>会议名称</th>
                                                <th>会议申请人</th>
                                                <th>会议时间</th>
                                                <th>会议状态</th>
                                                </thead>
                                                <tbody>
                                                <notempty name="room.meetings.details">
                                                    <volist name="room.meetings.details" id="meeting" key="k">
                                                        <tr>
                                                            <td>{$k}</td>
                                                            <td>
                                                                <a href="/meetings/show?id={$meeting.id}">{$meeting.title}</a>
                                                            </td>
                                                            <td>{$meeting.user.author_name}</td>
                                                            <td>
                                                                {$meeting.start} 至 {$meeting.end}
                                                            </td>
                                                            <td>
                                                                <eq name="meeting.status" value="0">
                                                                    <eq name="meeting.time_status" value="0">
                                                                        <span class="tag tag-warning"> 未开始 </span>
                                                                    </eq>
                                                                    <eq name="meeting.time_status" value="1">
                                                                        <span class="tag tag-success"> 进行中 </span>
                                                                    </eq>
                                                                    <eq name="meeting.time_status" value="2">
                                                                        <span class="tag tag-night"> 已结束 </span>
                                                                    </eq>
                                                                    <else/>
                                                                    <span class="tag tag-danger"> 已取消 </span>
                                                                </eq>
                                                            </td>
                                                        </tr>
                                                    </volist>
                                                    <else/>
                                                        <td colspan="5" class="text-muted text-center">暂无信息</td>
                                                    </notempty>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class=" mt-5">
                                        <i class="fa fa-map-marker"></i>
                                        {$room.location}
                                    </div>
                                    <div class=" mt-10">
                                        {$room.description}
                                    </div>
                                </div>
                                <div class="room-info-footer clearfix">
                                    <ul>
                                        <li>
                                            <div class="room-word">{$room.seats}</div>
                                            <div class="room-text">座位</div>
                                        </li>
                                        <li>
                                            <div class="room-word">{$room.type}</div>
                                            <div class="room-text">类型</div>
                                        </li>
                                        <li class="room-word">
                                            <div class="room-word">{$room.user.author_name}</div>
                                            <div class="room-text">创建者</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="pull-right">
                                <!-- 会议室的图片 -->
                                <div class="room-pic">
                                    <img src="{$room.pic}" alt="{$room.name}的图片">
                                </div>
                            </div>
                        </div>
                    </li>
                </volist>
                <!-- 展示会议室列表的面板 end -->
            </ul>
            <!--分页-->
            <ul class="pagination pagination-edit">{$page}</ul>
            <else/>
            <div class="no--info"></div>
        </notempty>
    </div>
</div>

<script>
    $(function() {
        layui.use(['layer'], function() {
            var layer = layui.layer;

            //查看会议弹窗
            $(document).on('click', '.title .btn', function () {
                var html = $(this).next();
                console.log(html);
                layer.open({
                    type: 1,
                    title: '查看会议',
                    area: ['650px', '400px'],//弹出框大小
                    content: html,
                    closeBtn: 2,
                    shadeClose: true
                })
            });

            $('a.desctroy').click(function() {
                var id = $(this).attr('data-id');
                layer.confirm('你确定要删除该会议室吗？', {
                    icon: 3
                }, function(){
                    $.post('/meetings/destroyMeetingRoom', {
                        id: id
                    }, function(response) {
                        if (response.code) {
                            layer.alert(response.msg, {icon: 2, title: "错误提示"});
                        } else {
                            location.reload();
                        }
                    }, 'json');
                });
            });
        });
    });
</script>